<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			.card {
				display: flex;
			}

			.flip-card {
				float: left;
				position: relative;
				height: 36vmin;
				width:
					calc(40vmin / 1.4);
				background-color: white;
				padding: 20px;
				border-radius:
					calc(40vmin / 20);
				box-shadow: 0 calc(40vmin / 40) calc(40vmin / 10) 0 rgba(0,
						0, 0, 0.6);
				overflow: hidden;
				transition: transform 200ms linear, box-shadow 200ms linear, background-color 200ms linear;
				transform: rotateY(0deg);
			}

			.label:hover .flip-card {
				transform: rotateY(180deg);
				background-color:
					black;
				transition: transform 200ms linear, box-shadow 200ms linear, background-color 200ms linear;
			}

			.label:hover .flip-front {
				opacity: 0;
				display: none;
				transition: transform 200ms linear, box-shadow 200ms linear, background-color 200ms linear;
			}

			.label:hover .flip-end {
				opacity: 1;
				display: block;
				transform:
					rotateY(180deg);
				color: white;
				font-size: 20px;
				transition: transform 200ms linear, box-shadow 200ms linear, background-color 200ms linear;
			}

			.flip-front {
				width: 100%;
				height: 100%;
				opacity: 1;
				cursor: pointer;
			}

			.flip-end {
				width: 100%;
				height: 100%;
				opacity: 0;
				display: none;
				cursor:
					pointer;
			}

			.label {
				background-color: white;
				border-radius: calc(40vmin / 20);
			}
		</style>
	</head>
	<body>
		<div class="card">
			<div class="label">
				<div class="flip-card">
					<div class="flip-front"> </div>
					<div class="flip-end">
						card card-inner
						card-front
						card-back card :hover
						card-inner Y 180
					</div>
				</div>
			</div>
		</div>

		<progress id="progress" value="0" max="100"></progress>
		<script>
			const progress = document.getElementById("progress")
			window.addEventListener("load", () => {
				progress.value = 100
			})
			window.addEventListener("readystatechange", () => {
				const progress = Math.floor((document.readyState / 4) * 100);
				progress.value = progress
			})
		</script>
	</body>
</html>